<template>
  <div class="viphallOrder">
    <!-- 顶部 -->
    <div style="margin: 10px">
      <h4>值机订单-查询条件</h4>
    </div>
    <!-- 查询条件 -->
    <div class="middle">
      <el-form ref="form" size="mini" :inline="true" :model="inquiry" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="inquiry.vipName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input placeholder="请输入手机号" v-model="inquiry.vipPhone" oninput="value=value.replace(/[^\d]/g,'')">
          </el-input>
        </el-form-item>
        <el-form-item label="会员卡号" prop="cardCord">
          <el-input v-model="inquiry.cardCode" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">
          </el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="inquiry.oederNumber"></el-input>
        </el-form-item>
        <!--所属部门-->
        <!-- <el-form-item label="所属部门" class="qq">
          <el-select clearable size="mini" v-model="inquiry.department">
            <el-option
              v-for="item in departmentList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- 值机方式 -->
        <el-form-item label="值机方式" class="qq">
          <el-select clearable size="mini" v-model="inquiry.checkMethod">
            <el-option v-for="item in checkMethodList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 下单时间 -->
        <el-form-item label="下单日期">
          <el-date-picker size="mini" style="width: 140px" v-model="CX.date1" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>
          <span class="invoice-9">至 </span>
          <el-date-picker size="mini" style="width: 140px" v-model="CX.date2" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>
        </el-form-item>
        <!-- 服务日期 -->
        <el-form-item label="起飞时间">
          <el-date-picker size="mini" style="width: 140px" v-model="CX.date3" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>
          <!-- <span class="invoice-9">至 </span>
          <el-date-picker
            size="mini"
            style="width: 140px"
            v-model="CX.date4"
            type="date"
            placeholder="选择日期"
            :value-format="format"
          >
          </el-date-picker> -->
        </el-form-item>
        <!--订单状态-->
        <el-form-item label="订单状态" class="qq">
          <el-select clearable size="mini" v-model="inquiry.orderStatus">
            <el-option v-for="item in orderStatusList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getselectVipchannelOreder()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 订单列表 -->
    <div class="table">
      <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="dataList" border style="width: 100%">
        <el-table-column prop="orderNum" label="订单号"> </el-table-column>
        <el-table-column prop="departureCity" label="城市"> </el-table-column>
        <el-table-column width="100px" prop="airport" label="机场">
        </el-table-column>
        <el-table-column width="100px" prop="departureAirportterminalname" label="航站楼">
        </el-table-column>
        <el-table-column width="100px" prop="contactName" label="姓名">
        </el-table-column>

        <el-table-column width="100px" prop="cardNumber" label="会员卡号">
        </el-table-column>
        <el-table-column width="130px" prop="contactPhone" label="手机号">
        </el-table-column>
        <el-table-column width="130px" prop="sourceCompanyid" label="订单来源">
        </el-table-column>
        <el-table-column width="130px" prop="createTime" label="下单日期">
          <template slot-scope="scope">
            {{ showcreatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column width="130px" prop="departureTime" label="起飞时间">
        </el-table-column>

        <el-table-column width="130px" prop="flightNumber" label="航班号">
        </el-table-column>

        <el-table-column width="130px" prop="state" label="订单状态">
          <template slot-scope="scope">
            <template v-if="scope.row.state == 'paid'">已支付</template>
            <template v-if="scope.row.state == 'unpaid'">未支付</template>
            <template v-if="scope.row.state == 'Cancellation'">取消</template>
            <template v-if="scope.row.state == 'completed'">已完成</template>
          </template>
        </el-table-column>

        <el-table-column width="130px" prop="checkinserviceId" label="值机方式">
          <template slot-scope="scope">
            <template v-if="scope.row.checkinserviceId == 'online'">网上值机</template>
            <template v-if="scope.row.checkinserviceId == 'offline'">线下值机</template>
          </template>
        </el-table-column>

        <el-table-column width="220px" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="getselectBoarding(scope.row)">查看详情</el-button>
            <!-- <el-button
              size="mini"
              type="warning"
              >取消订单</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
    <!-- 详情页弹窗 -->
    <el-dialog title="登机牌详情" :visible.sync="centerDialogVisible" :close-on-click-modal="false" width="60%" center>
      <!-- 客户信息 -->
      <table style="margin-top: 5px">
        <span>
          <td class="td-header">客户信息</td>
        </span>
        <tr>
          <td class="td-1">会员姓名</td>
          <td class="td-2">{{ vipdetailsList.customerName }}</td>
          <td class="td-1">会员电话</td>
          <td class="td-2">{{ vipdetailsList.customerPhone }}</td>
          <td class="td-1">会员卡号</td>
          <td class="td-2">{{ vipdetailsList.customerCard }}</td>
        </tr>
        <tr>
          <td class="td-1">下单日期</td>
          <td class="td-2">{{ vipdetailsList.createTime }}</td>
          <td class="td-1">订单来源</td>
          <td class="td-2">{{ vipdetailsList.sourceAppId }}</td>
        </tr>
      </table>
      <!-- 订单信息 -->
      <table style="margin-top: 5px">
        <span>
          <td class="td-header">订单信息</td>
        </span>
        <tr>
          <td class="td-1">联系人</td>
          <td class="td-3">{{ vipdetailsList.contactName }}</td>
          <td class="td-1">手机号</td>
          <td class="td-3" style="width: 900px">
            {{ vipdetailsList.contactPhone }}
          </td>
          <td class="td-1">订单号</td>
          <td class="td-3">{{ vipdetailsList.orderNum }}</td>
        </tr>

        <tr>
          <td class="td-1">机场</td>
          <td class="td-2">{{ vipdetailsList.setOffAirport }}</td>
          <td class="td-1">城市</td>
          <td class="td-2">{{ vipdetailsList.cityName }}</td>
          <td class="td-1">航班号</td>
          <td class="td-2">{{ vipdetailsList.flightNumber }}</td>
        </tr>
        <tr>
          <td class="td-1">航站楼</td>
          <td class="td-2">
            {{ vipdetailsList.departuprairportTerminalName }}
          </td>
          <td class="td-1">出港城市</td>
          <td class="td-2">{{ vipdetailsList.departuresCity }}</td>
          <td class="td-1">到港城市</td>
          <td class="td-2">{{ vipdetailsList.arrivalCity }}</td>
        </tr>
        <tr>
          <td class="td-1">起飞时间</td>
          <td class="td-2">{{ vipdetailsList.departureTime }}</td>
          <td class="td-1">到达时间</td>
          <td class="td-2">{{ vipdetailsList.arrivalTime }}</td>
          <td class="td-1">客户备注</td>
          <td class="td-2"></td>
        </tr>
        <tr>
          <td class="td-1">预定人数</td>
          <td class="td-2">{{ vipdetailsList.reserveNum }}</td>
          <td class="td-1">主键</td>
          <td class="td-2">{{ vipdetailsList.orderItemBoardingId }}</td>
          <td class="td-1">姓名</td>
          <td class="td-2">{{ vipdetailsList.guestName }}</td>
        </tr>
        <tr>
          <td class="td-1">证件号</td>
          <td class="td-2">{{ vipdetailsList.idNumber }}</td>
          <td class="td-1">座位号</td>
          <td class="td-2">{{ vipdetailsList.seatNumber }}</td>
          <td class="td-1">换取状态</td>
          <td class="td-2">{{ vipdetailsList.status }}</td>
        </tr>
        <tr>
          <td class="td-1">登机牌pdf417编码</td>
          <td class="td-2">{{ vipdetailsList.PDF417 }}</td>
          <td class="td-1">登机牌code128编码</td>
          <td class="td-2">{{ vipdetailsList.CODE128 }}</td>
          <td class="td-1">登机牌快照路径</td>
          <td class="td-2">{{ vipdetailsList.boardingPassImagepath }}</td>
        </tr>
      </table>
      <!-- 支付信息 -->
      <table style="margin-top: 5px">
        <span>
          <td class="td-header">支付信息</td>
        </span>
        <tr>
          <td class="td-1">价格(每人)</td>
          <td class="td-2">{{ vipdetailsList.totalReCommenedRetatlPrice }}</td>
          <td class="td-1">总金额</td>
          <td class="td-2">{{ vipdetailsList.totalsalePrice }}</td>
          <td class="td-1">支付状态</td>
          <td class="td-2">{{ vipdetailsList.paymentStatus }}</td>
        </tr>
        <tr>
          <td class="td-1">支付类型</td>
          <td class="td-2">{{ vipdetailsList.paymentType }}</td>
          <td class="td-1">支付金额</td>
          <td class="td-2">{{ vipdetailsList.paymentAmount }}</td>
          <td class="td-1">使用代金券</td>
          <td class="td-2">2{{ vipdetailsList.voucherAmount }}0</td>
        </tr>
        <tr>
          <td class="td-1">使用积分</td>
          <td class="td-2">{{ vipdetailsList.points }}</td>
          <td class="td-1">使用账户现金</td>
          <td class="td-2">{{ vipdetailsList.depositAmount }}</td>
          <td class="td-1">使用优惠券</td>
          <td class="td-2">{{ vipdetailsList.couponAmount }}</td>
        </tr>
        <tr>
          <td class="td-1">会员免费人次</td>
          <td class="td-2">{{ vipdetailsList.freeNum }}</td>
        </tr>
        <tr>
          <td class="td-1">人工操作退款</td>
          <td class="td-4">
            <el-input></el-input>
          </td>
        </tr>
      </table>
      <!-- 操作详情 -->
      <table style="margin-top: 5px">
        <span>
          <td class="td-header">操作详情</td>
        </span>
        <tr>
          <td class="td-6">操作人</td>
          <td class="td-5">操作时间</td>
        </tr>
        <tr>
          <td class="td-7">{{ vipchannelOrederTotalVo.inputPerson }}</td>
          <td class="td-7">{{ vipchannelOrederTotalVo.date }}</td>
        </tr>
      </table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">返回</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "viphallOrder",

    data() {
      return {
        // 值机方式下拉列表数据
        checkMethodList: [{
            value: "online",
            label: "网上值机",
          },
          {
            value: "offline",
            label: "线下值机",
          },
        ],
        // 表单验证规则
        rules: {
          phone: [{
            message: "请输入电话号码",
            trigger: "change"
          }],
          name: [{
            message: "请输入会员姓名",
            trigger: "change"
          }],
          cardCord: [{
            message: "请输入卡号",
            trigger: "change"
          }],
        },
        //分页
        pageSize: 10,
        pageNum: 1,
        pageTotal: 0,
        // 日期格式
        format: "yyyy-MM-dd",
        // 当前日期
        CX: {
          date1: new Date(new Date() - 24 * 60 * 60 * 1000 * 7)
            .toLocaleDateString()
            .replace(/\//g, "-"), //   日期时间
          date2: new Date(new Date()).toLocaleDateString().replace(/\//g, "-"),

          date3: "", //   日期时间
          date4: "",
        },
        // 所属部门列表
        departmentList: [],
        // 订单状态列表
        orderStatusList: [{
            value: "completed",
            label: "已完成",
          },
          {
            value: "Cancellation",
            label: "取消",
          },
          {
            value: "paid",
            label: "已支付",
          },
          {
            value: "unpaid",
            label: "未支付",
          },
        ],
        // 查询条件
        inquiry: {
          vipName: "", //会员姓名
          vipPhone: "", //手机号
          cardCode: "", //会员卡号
          oederNumber: "", //订单编号
          department: "", //所属部门
          vipName: "", //会员姓名
          vipName: "", //会员姓名
          department: "", //所属部门
          orderStatus: "", //订单状态
          checkMethod: "", //值机方式
        },
        // 弹窗显示隐藏
        centerDialogVisible: false,
        // 列表返回数据
        dataList: [],
        // 详情返回数据
        vipdetailsList: {},
        // 订单主键
        orderboardingId: "",
        // 操作集合
        vipchannelOrederTotalVo: {},
        // 订单详情集合
        orderItemViphallVoList: {},
      };
    },
    methods: {
      // 时间显示
      showcreatTime(val) {
        var val1 = val.split(".");
        var val2 = val1[0].split("T").join(" ");
        return val2;
      },
      // 部门列表接口
      geteedepartmentlist() {
        this.$axios.geteedepartmentlist({}).then((res) => {
          if (res.code == "200") {
            this.departmentList = res.data;
            console.log(this.departmentList);
          }
        });
      },
      getselectVipchannelOreder(){
        localStorage.setItem("pageSize", 10);
localStorage.setItem("pageNum", 1);
        this.getselectVipchannelOrederList()
      },
      // 登机牌订单列表
      getselectVipchannelOrederList() {
        localStorage.setItem("isToken", true);
        this.$axios
          .getselectVipchannelOrederList({
            departmentId: this.inquiry.department, //部门id
            customerCard: this.inquiry.cardCode, //会员卡号
            serviceSource: this.inquiry.serviceSource, //服务来源
            orderState: this.inquiry.orderStatus, //订单状态

            orderSource: this.inquiry.orderSource, //订单来源
            name: this.inquiry.vipName, //姓名
            phone: this.inquiry.vipPhone, //手机号
            orderNum: this.inquiry.oederNumber, //订单编号
            orderDateForward: this.CX.date1, //下单日期前
            orderDateBack: this.CX.date2, //下单日期后
            serveDateForward: this.CX.date3, //服务日期前
            ServeDateBack: this.CX.date4, //服务日期后
            checkMethod: this.inquiry.checkMethod, //值机方式

          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.dataList = res.data;
              this.pageTotal = res.total;
              
              // if (!this.pageTotal) {
              //   this.$message({
              //     message: "当前日期暂无信息",
              //   });
              // }
            }
          });
      },
      // 登机牌详情接口
      getselectBoarding(row) {
        console.log(row);
        this.orderboardingId = row.orderboardingId;
        localStorage.setItem("isToken", true);
        this.$axios
          .getselectBoarding({
            orderboardingId: String(this.orderboardingId),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.centerDialogVisible = true;
              this.vipdetailsList = res.data;
              console.log(this.vipdetailsList);
              this.vipchannelOrederTotalVo = res.data.vipchannelOrederTotalVo; //操作记录
              if (this.vipdetailsList.paymentStatus == "waitPay") {
                this.vipdetailsList.paymentStatus = "未支付";
              }
              if (this.vipdetailsList.paymentStatus == "payd") {
                this.vipdetailsList.paymentStatus = "已支付";
              }
              if (this.vipdetailsList.paymentStatus == "failPay") {
                this.vipdetailsList.paymentStatus = "支付失败";
              }
              if (this.vipdetailsList.paymentStatus == "cancelPay") {
                this.vipdetailsList.paymentStatus = "取消支付";
              }
              
            }
          });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getselectVipchannelOrederList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getselectVipchannelOrederList();
        // orders = res.data;
      },

      search() {
        localStorage.setItem("pageNum", this.pageNum);
        localStorage.setItem("pageSize", 10);
        this.getselectVipchannelOrederList();
      },
    },

    mounted() {

      // 调用部门列表
      this.geteedepartmentlist();
      // 列表
      this.getselectVipchannelOrederList();
    },
  };
</script>
<style scoped>
  .middle {
    display: flex;
    margin-top: 20px;
    margin-left: 10px;
  }

  .table {
    margin-left: 20px;
  }

  /* 弹窗css */
  .td-header {
    height: 20px;
    color: black;
    font-weight: 500;
  }

  .td-1 {
    width: 200px;
    height: 40px;
    background-color: #faffff;
    border: 0.5px solid #ebeef5;
  }

  .td-2 {
    width: 450px;
    border: 0.5px solid #ebeef5;
  }

  .td-3 {
    width: 450px;
    border: 0.5px solid #ebeef5;
  }

  .td-4 {
    width: 900px;
    border: 0.5px solid #ebeef5;
  }

  .td-5 {
    width: 337px;
    border: 0.5px solid #ebeef5;
    background-color: #faffff;
  }

  .td-6 {
    width: 337px;
    border: 0.5px solid #ebeef5;
  }

  .td-7 {
    height: 25px;
    width: 337px;
    border: 0.5px solid #ebeef5;
  }
</style>